<template>
  <div class="legend">
    <div class="page">
      <div class="lable">{{ airName || '--' }}图例</div>
      <div class="lable">({{ airUnit || '--' }})</div>
      <div v-for="(item, index) in colorList" :key="index" class="content">
        <div class="color" :class="item" />
        <div class="interval">{{ valueRange[5 - index] || 0 }} - {{ valueRange[6 - index] || '' }}</div>
      </div>
    </div>
    <div id="imageId" class="lines">
      <div>
        <div class="lable">{{ airName || '--' }}</div>
        <div class="lable">({{ airUnit || '--' }})</div>
      </div>
      <div style="display: flex;">
        <div v-for="(item, index) in colorList" :key="index" class="content">
          <div class="color" :class="colorList[5 - index]" />
          <div class="interval">{{ valueRange[index] || '' }} - {{ valueRange[index + 1] || '' }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { onMounted, reactive, ref, toRefs, watch } from 'vue'

export default {
  props: {
    airName: {
      type: String,
      default: ''
    },
    airUnit: {
      type: String,
      default: ''
    },
    range: {
      type: Array,
      default: () => []
    }
  },
  setup(props, { emit }) {
    const colorList = ['one', 'two', 'three', 'four', 'five', 'six']

    const data = reactive({
      airName: null,
      airUnit: null,
      valueRange: []
    })

    watch(() => props.airName, newVal => {
      if (newVal) {
        data.airName = newVal
      }
    })

    watch(() => props.airUnit, newVal => {
      if (newVal) {
        data.airUnit = newVal
      }
    })

    watch(() => props.range, newVal => {
      if (newVal) {
        data.valueRange = newVal
      }
    })

    return {
      ...toRefs(data),
      colorList
    }
  }
}
</script>
<style lang="scss" scoped>
.legend {
  position: relative;
  left: -100px;
}

.page {
  text-align: center;
  background-color: #0000007a;
  height: 386px;
  padding: 20px;
  border-radius: 5px;
  float: left;

  .lable {
    font-size: 20px;
    color: #fff;
  }

  .content {
    display: flex;
    text-align: center;
    align-items: center;

    .color {
      width: 30px;
      height: 10px;
      margin: 20px 15px;
    }

    .one {
      background-color: rgb(203, 21, 20);
    }

    .two {
      background-color: rgb(113, 6, 187);

    }

    .three {
      background-color: rgb(210, 73, 50);

    }

    .four {
      background-color: rgb(240, 125, 0);

    }

    .five {
      background-color: rgb(255, 196, 20);

    }

    .six {
      background-color: rgb(0, 228, 0);

    }

    .interval {
      font-size: 16px;
      color: #fff;
      min-width: 130px;
    }
  }
}

.lines {
  height: 100px;
  border-radius: 5px;
  padding: 15px 40px;
  display: flex;
  background-color: rgb(51, 69, 81);
  float: left;
  position: absolute;
  top: 1000px;

  .lable {
    width: 160px;
    font-size: 20px;
    color: #fff;
  }

  .content {
    align-items: center;
    text-align: center;
    display: flex;
    flex-direction: column;
    margin: 0 10px;

    .color {
      width: 40px;
      height: 20px;
      margin: 10px;
    }

    .one {
      background-color: rgb(203, 21, 20);
    }

    .two {
      background-color: rgb(113, 6, 187);

    }

    .three {
      background-color: rgb(210, 73, 50);

    }

    .four {
      background-color: rgb(240, 125, 0);

    }

    .five {
      background-color: rgb(255, 196, 20);

    }

    .six {
      background-color: rgb(0, 228, 0);

    }

    .interval {
      font-size: 16px;
      color: #fff;
      width: 100%;
      min-width: max-content;
    }
  }

}
</style>
